<script setup>
const props = defineProps(['studentId'])

</script>
<template>
    <div class="personal-profile" >
        <div class="avatar" >
            <img src="/src/assets/images/student/avatar.svg" alt="Avatar" width="128" >
            <p>昵称</p>
        </div>
        <div class="info" >
            <p><span>姓名</span></p>
            <p><span>单位</span></p>
            <p><span>学号</span></p>
            <p><span>联系方式</span></p>
        </div>
        <div class="introduction" >
           我是 李芳 访问方法 发偶尔 我就佛我 叫偶 分奇偶位 飞机欧 文就 解耦 奇偶位 额
        </div>
    </div>


</template>
<style scoped>
.personal-profile {
    display: grid;
    width: 100%;
    grid-template-areas: "avatar info"
    "introduction introduction";
    grid-template-columns: 50% 50%;
    font-family: Source Han Sans CN;
	font-size: 20px;
	color: #707070;
}

.personal-profile > .avatar {
    grid-area: avatar;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.personal-profile > .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
}

.personal-profile > .info > p {
    margin-bottom: 20px;
}

.personal-profile > .info > p > span::after {
    content: ': '
}

.personal-profile > .introduction {
    grid-area: introduction;
    border: solid 1px #707070;
    padding: 10px 20px;
    height: 158px;
    overflow: auto;
}

.personal-profile > .introduction::before {
    content: '个人简介: '
}



</style>